<template>
  <div class="top">
    <div class="left">
      <div class="dot"></div>
      <span class="blod-text">请选择收货地址</span>
      <div class="button text thumb" @click="add">新增地址+</div>
    </div>
    <div class="right">
      <div class="text show-text thumb" @click="()=>showAddress=!showAddress">
        显示全部地址
        <div :class="['img-icon', showAddress ? `close-icon` : `` ]" :title="showAddress ? `收起`: `展开`">
          <img :src="publicUrl(`/images/big-arrow.png`)" />
        </div>
      </div>

      <div class="red text">管理收货地址</div>
    </div>
  </div>
  <div :class="['address-part', showAddress ? 'show' : 'close']">
    <div
      :class="[
        'part',
        'part-width',
        index === actvit ? 'sel-frame' : 'nosel-frame',
        'thumb',
      ]"
      v-for="(item, index) in addressData"
      @click="() => clickAddress(item,index)"
    >
      <div class="top">
        <div class="name overOne">
          {{ item.province }}{{ item.city }}({{ item.consignee }}收)
        </div>
        <div class="default">{{ item.default === 1 ? `默认地址` : `` }}</div>
      </div>

      <div class="dir"></div>

      <div class="detail">{{ item.full_address }}&nbsp;{{ item.phone }}</div>
      <div class="frame" v-show="index === actvit">
        <img :src="publicUrl(`/images/address-frame.png`)" />
      </div>
    </div>
    <div
      class="part-width"
      v-for="index of surplusDiv(addressData.length, 4)"
    ></div>
  </div>

  <Form v-model:show="visible" />
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl, surplusDiv } from "@/utils/util";
import Form from "./components/Form/index.vue";

import {AddressData} from "../../interface";

const visible = ref<boolean>(false);

const showAddress = ref<boolean>(false);

const addressData = ref<Array<AddressData>>([
  {
    province: "广东",
    city: "中山",
    default: 1,
    phone: "17325764718",
    consignee: "苏耀勇",
    full_address: "港口智汇广场1202",
  },
  {
    province: "广东",
    city: "中山",
    default: 0,
    phone: "17325764718",

    consignee: "苏耀勇",
    full_address: "港口智汇广场1202",
  },
  {
    province: "广东",
    city: "中山",
    default: 0,
    phone: "17325764718",

    consignee: "苏耀勇",
    full_address: "港口智汇广场1202",
  },
  {
    province: "广东",
    city: "中山",
    default: 0,
    phone: "17325764718",

    consignee: "苏耀勇",
    full_address: "港口智汇广场1202",
  },
  {
    province: "广东",
    city: "中山",
    default: 0,
    phone: "17325764718",

    consignee: "苏耀勇",
    full_address: "港口智汇广场1202",
  },
]);
const emits = defineEmits<{
  (event:'clickAddress',item:AddressData|undefined):void
}>()
const actvit = ref<number>(0); //选中
emits("clickAddress",addressData.value[actvit.value] ? addressData.value[actvit.value] : undefined  );

const clickAddress = (item:AddressData,index:number)=>{
  actvit.value = index;
  emits("clickAddress",item);
}
const add = () => {
  visible.value = true;
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
